﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head><link rel="stylesheet" href="${ctx}/common/common.css">
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    
</head>
<body>
<form class="layui-form" action="${ctx}/managementSystem/saveManagementSystem">
    <input type="hidden" name="id" value="${managementSystem.id}" />
    <input type="hidden" name="t_e_id" value="${managementSystem.t_e_id}" />
    <input type="hidden" name="creatorId" value="${managementSystem.creatorId}" />
    <input type="hidden" name="creatorName" value="${managementSystem.creatorName}" />
    <input type="hidden" name="deleteFlag" value="0" />
    <div class="layui-form-item layui-col-md7">
        <label class="layui-form-label">制度名称<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input type="text" name="name" value="${managementSystem.name}" lay-verify="required" placeholder="请输入制度名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-col-md5">
        <label class="layui-form-label">附件<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择一个附件</button>
                <p style="color:red">仅支持xlsx、xls、doc、docx、pdf格式文件</p>
                <p style="color:red">文件名不能含有'+'，'-'</p>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr><th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr></thead>
                        <tbody id="demoList">
                            <c:if test="${!empty managementSystem.url}">
                        	<tr>
		                        <td>${managementSystem.fileName} <input type="hidden" name="fileName" value="${managementSystem.fileName}" /></td>
		                        <td>${managementSystem.fileByte}kb <input type="hidden" name="fileByte" value="${managementSystem.fileByte}" /></td>
		                        <td>上传成功</td>
		                        <td>
		                        <button id="delete-btn" class="layui-btn layui-btn-mini layui-btn-danger">删除</button>
		                        </td>
	                        </tr>
	                        </c:if>
                        </tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        <%--            <input type="text" name="age"   lay-verify="number" value="${managementSystem.url}"  placeholder="请输入标题" autocomplete="off" class="layui-input">--%>
        </div>
    </div>
    <input type="hidden" name="url" id="url" value="${managementSystem.url}" lay-verify="isfile" />
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn"  lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
        </div>
    </div>
</form>

<script>
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //选完文件后不自动上传
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: '${ctx}/managementSystem/upload/'
            ,accept: 'file'
            ,exts:'xlsx|xls|doc|docx|pdf|'
            ,multiple: false
            ,number:'1'
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'<input type="hidden" name="fileName" value="'+ file.name +'" /></td>'
                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb<input type="hidden" name="fileByte" value="'+ (file.size/1014).toFixed(1) +'" /></td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        ,'<input type="hidden" id="fileIndex" value="'+ index +'" /></td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    var oldIndex = $("#fileIndex").val();
                    delete files[oldIndex];
                    demoListView.empty();
                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.code == 0){ //上传成功
                	$('#url').val(res.url);
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    $('#testList').hide();
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    })
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));
           //return false;
            $(this).attr("disabled",true);
        });
    });
    layui.use('table', function() {
    	var table = layui.table;
    	var $ = layui.$;
    	document.getElementById("delete-btn").addEventListener("click", function () {
            $(this).parent().parent().remove();
            $("#url").val("");
        })
    });
    document.getElementById("rollback").addEventListener("click",function(){
        window.history.back();
    })
    layui.use('form', function(){
    	var $ = layui.$;
    	var form = layui.form;
    	 form.verify({
             isfile: function(value, item){ //value：表单的值、item：表单的DOM对象
                 if(value.trim().length<=0){
                     return "请上传附件";
                 }
             }
         });
    });
</script>
</body>
</html>



